<template>
  <div>
    <h2>App组件</h2>
    <MyDialog>
      <!-- 标签内的所有代码，都是给插槽传递的结构 -->
      <!-- <template v-slot:title="obj"> -->
      <template v-slot:title="{ uname, age }">
        <!-- 接收到的值，只能在当前的template里面用，所以这类插槽叫做 作用域插槽 -->
        添加学员 {{ uname }} {{ age }}
      </template>

      <!-- v-slot: 可以简写成 # -->
      <template #content>
        <form action="">
          姓名：<input type="text"><br />
          年龄: <input type="text" />
        </form>
      </template>
     
      <!-- 没有被template包裹的所有内容，都是传递给默认插槽的 -->
      <button>确认添加</button>
      <button>取消</button>
    </MyDialog>

    <MyDialog>
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog.vue'
export default {
  components: { MyDialog },

}
</script>

<style>

</style>